<template>
  <div class="qiugouwarp">
    <header>
      <van-icon @click="back" size="25px" name="arrow-left" />
      <h3>求购</h3>
      <span></span>
    </header>
    <main>
    
         <van-dropdown-menu>
        <van-dropdown-item @change="aa(option1[value1])" v-model="value1" :options="option1" />

        <van-dropdown-item @change="bb(option2[value2])" v-model="value2" :options="option2" />
      </van-dropdown-menu>
 
     

      <div class="mains" v-for="(item) in data" :key="item.id">
        <dl>
          <dt>
            <div class="dt">
              <span>
                <img :src="item.img" alt />
              </span>
              <h3>{{item.name}}</h3>
              <h2>{{item.type}}</h2>
            </div>

            <b>{{item.time}}</b>
          </dt>
          <dd>
            <h3>{{item.title}}</h3>
          </dd>

          <hr />
          <dd id="ddd">
            <div class="left">
              <span>意向地区：{{item.city}}</span>
              <span>意向价格：{{item.price}}/月</span>
            </div>
            <div class="right">
              <van-icon @click="liaotian" size="25px" name="chat-o" />
              <van-icon @click="jianpan" size="25px" name="phone-o" />
            </div>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/axios";
export default {
  data() {
    return {
      data: [],
      value1: 0,
      value2: 0,
      option1: [
        { text: "房产类型", value: 0 },
        { text: "高层住宅", value: 1 },
        { text: "多层住宅", value: 2 },
        { text: "商铺", value: 3 },
        { text: "厂房", value: 4 },
        { text: "写字楼", value: 5 },
        { text: "别墅", value: 6 },
        { text: "车库", value: 7 }
      ],
      option2: [
        { text: "区域选择", value: 0 },
        { text: "海淀区", value: 1 },
        { text: "朝鲜区", value: 2 },
        { text: "丰台区", value: 3 },
        { text: "大兴区", value: 4 },
        { text: "昌平区", value: 5 }
      ]
    };
  },
  created() {
    axios.get("/demandBuy").then(res => {
      this.data = res.data.list;
      console.log(res.data.list);
    });
  },
  methods: {
    back() {
      // this.$router.push("/message");
      this.$router.push("/Home");
    },
    aa(i) {
      console.log(i.text);
      this.data = this.data.filter(item => {
        let haha = item.type.indexOf(i.text) !== -1;
        console.log(haha);
        return haha;
      });
    },
    bb(i) {
      console.log(i.text);
      this.data = this.data.filter(item => {
        let haha = item.city.indexOf(i.text) !== -1;
        console.log(haha);
        return haha;
      });
    },
    liaotian() {
      this.$router.push("/liaotian");
    },
    jianpan() {
      this.$router.push("/jianpan");
    }
  },
  component: {}
};
</script>

<style lang="less"  scoped>
.qiugouwarp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    background: rgb(1, 153, 241);
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
  }
  main {
    width: 100%;
    height: 100%;
    overflow: scroll;
    background: #eee;
  }
  .van-dropdown-menu{
    position: sticky;
    top:0;
    z-index: 963;
  
  }
  .mains {
    background: white;
    margin: 10px 0;
    dl {
      padding: 0 10px;
      width: 100%;
      height: 170px;
      text-align: center;
      border: 1px #cccc solid;
      dt {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .dt {
          display: flex;
          align-items: center;
          h2 {
            color: red;
          }
          span {
            width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 50%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      dd {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
      }

      #ddd {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;

        .left {
          width: 75%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .right {
          width: 20%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>